<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		<link rel="stylesheet" href="css/sidebar.css">
		<style>
			div{
				width: 300px;
				height: 300px;
			}
			div.taiyi{
				background: url(img/neza1.png);
				background-size:100% 100% ;
				position: absolute;
				/* 堆叠属性：必须存在相对或绝对定位 情况下z-index堆叠属性 属性值9999*/
				z-index: 2;
			}
			div.shengongbao{
				background: url(img/neza4.png);
				background-size:100% 100% ;
				position: absolute;
				z-index: 1;
			}
		</style>
	</head><!--  -->
	<body>
		<!-- 左栏：弹窗功能 
		语义化元素--div功能一致【有宽没高区域】
		div起名--不利于SEO优化
		涵盖名称--有利于SEO优化
		建议：搭建页面结构，固定功能：左栏，主区域，导航栏
		使用语义化元素
		article元素：独立的内容区域块，存：新闻，博客区域左栏弹出功能-->
		<article>
			<ul class="sidebar">
				<!-- 左栏弹出框：找到无序列表第一个li上,div起名outer -->
				<div class="outer"></div>
		</li>
				<li>手机 平板 电话卡 ></li>
				<li>电视 盒子 ></li>
				<li>路由器 智能硬件 ></li>
				<li>移动电源 插线板 ></li>
				<li>耳机 音响 ></li>
				<li>电池 储存卡 ></li>
				<li>保护套 后盖 ></li>
				<li>贴膜 其他配件 ></li>
				<li>米兔 服装 ></li>
				<li>箱包 其他周边 ></li>
			</ul>
		</article>
		
		
		
		
		
		
		
		
		
		<!-- 相对定位于与绝对定位，页面弹出功能 
		   相对定位：position:relation 使用率高，相对于父级元素，存在于文档流中
		   绝对定位：position:absolute,使用率高，存在于父级，按照父级-定位，没有父级
		   按照网页左上角定位，元素脱离文档流！
		   堆叠问题：z-index属性：属性值，属性值越大，越靠前
		   根据相对定位与绝对定位特点，实现左栏功能
		   左栏区使用相对定位：左栏区域基本不会移动【钩点位】
		   左栏弹出使用绝对定位：左栏弹出区频繁切换【钩子】-->
		   <d iv class="taiyi"></div>
		   <d iv class="shengongbao"></div>
	</body>
</html>